<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.js" charset="utf-8"></script>
</head>
<body>
<!--header start-->
<div class="padding_top_bottom" id="header">
    <div class="pw mw">
        <a href="javascript:void(0);"><img src="logo.png" width="326" height="40"/></a>
    </div>
</div>
<!--header end-->

<!--main start-->
<div class="padding_top_bottom" id="main">
    <div class="pw mw" id="main_box">
        <!--menu start-->
        <div class="fl" id="menu">
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>开始前必读</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">更新日志</a>
                    <a href="javascript:void(0);">开发者规范</a>
                    <a href="javascript:void(0);">公众号接口权限说明</a>
                    <a href="javascript:void(0);">接口频率限制说明</a>
                    <a href="javascript:void(0);">接口返回码说明</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>开始开发</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>自定义菜单</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>消息管理</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信网页开发</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>素材管理</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>用户管理</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>帐号管理</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>数据统计</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信小店</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信卡券</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信门店</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信智能接口</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信设备功能</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信多客服功能</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信摇一摇周边</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信连Wi-Fi</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
            <div class="menu_item_box">
                <div class="menu_item_category"><span class="menu_arrow"></span>微信扫一扫</div>
                <div class="menu_item">
                    <a href="javascript:void(0);">子菜单1</a>
                    <a href="javascript:void(0);">子菜单2</a>
                    <a href="javascript:void(0);">子菜单3</a>
                </div>
            </div>
        </div>
        <!--menu end-->
        <!--content start-->
        <div class="fr" id="content">
            <div id="content_category">首页</div>
            <div id="content_body">
                <p>微信公众平台是运营者通过公众号为微信用户提供资讯和服务的平台，而公众平台开发接口则是提供服务的基础，开发者在公众平台网站中创建公众号、获取接口权限后，可以通过阅读本接口文档来帮助开发。</p>
                <p>为了识别用户，每个用户针对每个公众号会产生一个安全的OpenID，如果需要在多公众号、移动应用之间做用户共通，则需前往微信开放平台，将这些公众号和应用绑定到一个开放平台账号下，绑定后，一个用户虽然对多个公众号和应用有多个不同的OpenID，但他对所有这些同一开放平台账号下的公众号和应用，只有一个UnionID，可以在用户管理-获取用户基本信息（UnionID机制）文档了解详情。</p>
                <p>1、微信公众平台开发是指为微信公众号进行业务开发，为移动应用、PC端网站、公众号第三方平台（为各行各业公众号运营者提供服务）的开发，请前往微信开放平台接入。</p>
                <p>2、在申请到认证公众号之前，你可以先通过测试号申请系统，快速申请一个接口测试号，立即开始接口测试开发。</p>
                <p>3、在开发过程中，可以使用接口调试工具来在线调试某些接口。</p>
                <p>4、每个接口都有每日接口调用频次限制，可以在公众平台官网-开发者中心处查看具体频次。</p>
                <p>5、在开发出现问题时，可以通过接口调用的返回码，以及报警排查指引（在公众平台官网-开发者中心处可以设置接口报警），来发现和解决问题。</p>
                <p>6、公众平台以access_token为接口调用凭据，来调用接口，所有接口的调用需要先获取access_token，access_token在2小时内有效，过期需要重新获取，但1天内获取次数有限，开发者需自行存储，详见获取接口调用凭据（access_token）文档。</p>
                <p>7、公众平台接口调用仅支持80端口。</p>
            </div>
        </div>
        <!--content end-->
        <div class="clear"></div>
    </div>
</div>
<!--main end-->

<!--footer start-->
<div id="footer">
    <div class="pw mw">
        <a href="javascript:void(0);">关于腾讯</a>
        <a href="javascript:void(0);">服务协议</a>
        <a href="javascript:void(0);">客服中心</a>
        <a href="javascript:void(0);">在线客服</a>
        <span>Copyright &copy; 2012-2016 Tencent. All Rights Reserved.</span>
    </div>
</div>
<!--footer end-->

<script type="text/javascript">
function setHeight(){
    $("#menu,#content").css("min-height","auto");
    var menuHeight=$("#menu").outerHeight(true);
    var contentHeight=$("#content").outerHeight(true);
    var minHeight=Math.max(menuHeight,contentHeight);
    $("#menu,#content").css("min-height",minHeight+"px");
}

$(function(){
    $("div.menu_item_category").click(function(){
        var has=$(this).parent().hasClass("active");
        $("div.menu_item").hide();
        $("div.menu_item_box").removeClass("active");
        if(!has){
            $(this).parent().addClass("active").find("div.menu_item").show();
        }
        setHeight();
    });
    $("div.menu_item_category:first").trigger("click");
});
</script>
</body>
</html>
